<div style="display: flex; justify-content: space-between; align-items: center;margin-bottom: 16px;" class="mobile-view-modal">
    <div style="font-size: 24px; font-weight: 500;">{{'CREATE_ENDPOINT'|translate}}</div>
    <button mat-button (click)="dismiss($event)">
        <mat-icon>close </mat-icon>
    </button>
</div>
<form [formGroup]="fg">
    <mat-form-field>
        <mat-label>{{'NAME'| translate}}</mat-label>
        <input matInput formControlName="name" required>
        <mat-error>{{nameErrorMsg | translate}}</mat-error>
    </mat-form-field>
    <div style="margin-bottom: 8px; margin-top: 4px;">{{'SELECT_APP_TYPE_1'|translate}}<span
            class="mat-required">*</span></div>
    <mat-error style="font-size: 10px; margin-top: -4px;">{{typeErrorMsg | translate}}</mat-error>
    <mat-radio-group formControlName="type" style="display: block; overflow: auto;">
        <div style="display: flex; flex-direction: row;">
            <mat-card
                style="margin: 4px 8px 4px 0px; min-width: 140px; max-width:140px; height: 300px; display: flex; justify-content: center; flex-direction: column; cursor: pointer;"
                (click)="fg.get('type').setValue('PROTECTED_NONE_SHARED_API')">
                <div style="display: flex; justify-content: center;">
                    <mat-icon style="height: 64px; width: 64px; font-size: 64px;" color="primary">verified_user</mat-icon>
                </div>
                <div style="font-size: 14px; flex: 1;">
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PROTECTED_NONE_SHARED_API_MSG_1'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PROTECTED_NONE_SHARED_API_MSG_2'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px; font-size: 12px; font-weight: 700;">{{'PROTECTED_NONE_SHARED_API_MSG_3'|translate}}
                    </div>
                </div>
                <div style="display: flex; justify-content: center;">
                    <mat-radio-button value="PROTECTED_NONE_SHARED_API"></mat-radio-button>
                </div>
            </mat-card>
            <mat-card
                style="margin: 4px 0px 4px 8px; min-width: 140px; max-width:140px; height: 300px; display: flex; justify-content: center; flex-direction: column; cursor: pointer;"
                (click)="fg.get('type').setValue('PROTECTED_SHARED_API')">
                <div style="display: flex; justify-content: center;">
                    <mat-icon style="height: 64px; width: 64px; font-size: 64px;" color="primary">share</mat-icon>
                </div>
                <div style="font-size: 14px; flex: 1;">
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PROTECTED_SHARED_API_MSG_1'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PROTECTED_SHARED_API_MSG_2'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px; font-size: 12px; font-weight: 700;">{{'PROTECTED_SHARED_API_MSG_3'|translate}}
                    </div>
                </div>
                <div style="display: flex; justify-content: center;">
                    <mat-radio-button value="PROTECTED_SHARED_API"></mat-radio-button>
                </div>
            </mat-card>
            <mat-card
                style="margin: 4px 0px 4px 8px; min-width: 140px; max-width:140px; height: 300px; display: flex; justify-content: center; flex-direction: column; cursor: pointer;"
                (click)="fg.get('type').setValue('PUBLIC_API')">
                <div style="display: flex; justify-content: center;">
                    <mat-icon style="height: 64px; width: 64px; font-size: 64px;" color="primary">lock_open</mat-icon>
                </div>
                <div style="font-size: 14px; flex: 1;">
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PUBLIC_API_MSG_1'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PUBLIC_API_MSG_2'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px; font-size: 12px; font-weight: 700;">{{'PUBLIC_API_MSG_3'|translate}}
                    </div>
                </div>
                <div style="display: flex; justify-content: center;">
                    <mat-radio-button value="PUBLIC_API"></mat-radio-button>
                </div>
            </mat-card>
            <mat-card
                style="margin: 4px 0px 4px 8px; min-width: 140px; max-width:140px; height: 300px; display: flex; justify-content: center; flex-direction: column; cursor: pointer;"
                (click)="fg.get('type').setValue('PRIVATE_API')">
                <div style="display: flex; justify-content: center;">
                    <mat-icon style="height: 64px; width: 64px; font-size: 64px;" color="primary">visibility_off</mat-icon>
                </div>
                <div style="font-size: 14px; flex: 1;">
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PRIVATE_API_MSG_1'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px;">{{'PRIVATE_API_MSG_2'|translate}}
                    </div>
                    <div style="text-align: center; margin-top: 16px; margin-bottom: 16px; font-size: 12px; font-weight: 700;">{{'PRIVATE_API_MSG_3'|translate}}
                    </div>
                </div>
                <div style="display: flex; justify-content: center;">
                    <mat-radio-button value="PRIVATE_API"></mat-radio-button>
                </div>
            </mat-card>
        </div>
    </mat-radio-group>
</form>
<div style="display: flex; justify-content: end; align-items: center; margin-top: 16px;">
    <button mat-raised-button (click)="dismiss($event)" style="margin-right: 16px;">{{'CANCEL'|translate}}</button>
    <button mat-raised-button color="primary" (click)="create()">{{'CREATE'|translate}}</button>
</div>